<template>
  <section class="chart-container">
    <el-row>
      <div class="topTips">
        <div class="listTop">
          <p class="title">APP总收入</p>
          <p class="content">￥{{ appTotalIncome }}</p>
        </div>
        <div class="listTop user-reg">
          <p class="title">APP注册用户总量</p>
          <p class="content">{{ userRegTotalNum }}</p>
        </div>
        <div class="listTop field-sold">
          <p class="title">总付费转化</p>
          <p class="content">{{ app_user_change }}%</p>
        </div>
        <div class="listTop field-invent">
          <p class="title">总复购人数</p>
          <p class="content">{{ app_reBuyNumber }}人</p>
        </div>
        <div class="listTop user-reg">
          <p class="title">总复购单量</p>
          <p class="content">{{ app_total_reCount }}单</p>
        </div>
        <div class="listTop user-reg">
          <p class="title">总付费人数</p>
          <p class="content">{{ app_user_payTotal }}人</p>
        </div>
        <div class="listTop field-rebuy">
          <p class="title">人均复购单量</p>
          <p class="content">{{ app_reCount }}单/人</p>
        </div>
        <div class="listTop field-invent">
          <p class="title">复购率</p>
          <p class="content">{{ app_reBuy }}%</p>
        </div>
      </div>
    </el-row>
    <el-row>
      <div class="title-tab">
        <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
          <el-tab-pane label="收入详情" name="app_total_income">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.app_day_income" type="daterange" placeholder="选择日期范围" @change="chose_appIncome_date"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="app_income_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="用户新增" name="user_new_add">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_addNew" type="daterange" placeholder="选择日期范围" @change="chose_userNewAdd_date"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_newAdd_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="每日活跃" name="user_day_active">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_active" type="daterange" placeholder="选择日期范围" @change="chose_userDayActive_date"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_active_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="新注册付费转化" name="user_day_regPay">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_reg" type="daterange" placeholder="选择日期范围" @change="chose_userDayReg_pay"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_regPay_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="日付费率" name="user_day_pay">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_pay" type="daterange" placeholder="选择日期范围" @change="chose_userDay_pay"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_dayPay_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="日ARPU" name="user_day_arpu">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_arpu" type="daterange" placeholder="选择日期范围" @change="chose_userDay_arpu"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_dayarpu_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="日ARPPU" name="user_day_arppu">
            <template>
              <el-row>
                <div class="during">
                  <el-date-picker v-model="choseDate.user_day_arppu" type="daterange" placeholder="选择日期范围" @change="chose_userDay_arppu"></el-date-picker>
                </div>
                <el-col :span="19">
                  <div id="user_dayarppu_chartLine" style="width:1200px; height:400px;"></div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="购买次数排行" name="user_BuyOrderBy_change">
            <template>
              <el-row>
                <!--<div class="during">
                  <el-date-picker v-model="choseDate.user_buy_orderBy" type="daterange" placeholder="选择日期范围" @change="chose_returnBuy_change"></el-date-picker>
                </div>-->
                <el-col :span="19">
                  <div style="width:400px; height:2100px;">
                  	<template>
									    <el-table
									      :data="getFiveFields"
									      style="width: 100%">
									      <el-table-column
									        prop="nickname"
									        label="姓名"
									        width="180">
									      </el-table-column>
									      <el-table-column
									        prop="num"
									        label="购买次数（个）">
									      </el-table-column>
									    </el-table>
									  </template>
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
          <el-tab-pane label="付费金额排行" name="user_PayOrderBy_change">
            <template>
              <el-row>
                <!--<div class="during">
                  <el-date-picker v-model="choseDate.user_buy_orderBy" type="daterange" placeholder="选择日期范围" @change="chose_returnBuy_change"></el-date-picker>
                </div>-->
                <el-col :span="19">
                  <div style="width:400px; height:2100px;">
                  	<template>
									    <el-table
									      :data="getFiveMoneys"
									      style="width: 100%">
									      <el-table-column
									        prop="nickname"
									        label="姓名"
									        width="180">
									      </el-table-column>
									      <el-table-column
									        prop="num"
									        label="付费金额（元）">
									      </el-table-column>
									    </el-table>
									  </template>
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-row>
  </section>
</template>

<script type="text/ecmascript-6">

//  import echarts from 'echarts'
  // 引入基本模板
  import echarts from 'echarts/lib/echarts'
  // 引入line 组件
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/tooltip'
  import { apiTree } from '../../apiTree'
  import util from '../../util'

  export default {
    name: 'echarts',
    data() {
      return {
        choseDate: {
          'app_day_income': [],
          'user_day_addNew': [],
          'user_day_active': [],
          'user_day_reg': [],
          'user_day_pay': [],
          'user_day_arpu': [],
          'user_day_arppu': [],
          'user_total_change': [],
          'user_return_buy': []
        },
        appTotalIncome: 0,
        userRegTotalNum: 0,
        fieldSoldTotalNum: 0,
        fieldInventTotalNum: 0,
        app_user_change: 0,
        app_reBuy: 0,
        app_reCount: 0,
        app_total_reCount: 0,
        app_reBuyNumber: 0,
        app_user_payTotal: 0,
        activeName: 'app_total_income',
        appIncomeChart: null,
        userNewAddChart: null,
        userDayActiveChart: null,
        userDayRegPayChart: null,
        userDayPayChart: null,
        userDayArpuChart: null,
        userDayArppuChart: null,
        userBuyOrderByChart: null,
        userPayOrderByChart: null,
        getFiveFields: [],
        getFiveMoneys: [],
        appIncomeInfo: {
          dayIncome: [],
          xDate: []
        },
        appIncome0ptions: {
          title: {text: '收入详情'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['收入详情(单位/元)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '收入详情(单位/元)', type: 'line', stack: '总量', data: []}
        },
        userNewAdd0ptions: {
          title: {text: '新增详情'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['新增详情(单位/个)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '新增详情(单位/个)', type: 'line', stack: '总量', data: []}
        },
        userActiveOptions: {
          title: {text: '用户活跃数据'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['用户活跃数据(单位/个)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '用户活跃数据(单位/个)', type: 'line', stack: '总量', data: []}
        },
        appRegPayOptions: {
          title: {text: '新注册付费转化'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['注册消费(百分比)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '注册消费(百分比)', type: 'line', stack: '总量', data: []}
        },
        appDayPayOptions: {
          title: {text: '日付费率'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['日付费率(百分比)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '日付费率(百分比)', type: 'line', stack: '总量', data: []}
        },
        appDayArpuOptions: {
          title: {text: '日arpu'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['日arpu(元/个)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '日arpu(元/个)', type: 'line', stack: '总量', data: []}
        },
         appDayArppuOptions: {
          title: {text: '日arppu'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['日arppu(元/个)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '日arppu(元/个)', type: 'line', stack: '总量', data: []}
        },
        userTotalChangeOptions: {
        	title: {text: '总付费转化'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['总付费转化(百分比)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '总付费转化(百分比)', type: 'line', stack: '总量', data: []}
        },
        userTotalChangeOptions: {
        	title: {text: '总付费转化'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['总付费转化(百分比)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '总付费转化(百分比)', type: 'line', stack: '总量', data: []}
        },
        userReturnBuyChangeOptions: {
        	title: {text: '复购率'},
          tooltip: {trigger: 'axis'},
          grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
          legend: {data: ['复购率(百分比)']},
          xAxis: {type: 'category', boundaryGap: false, data: []},
          yAxis: {type: 'value'},
          series: {name: '复购率(百分比)', type: 'line', stack: '总量', data: []}
        },
        duringTime: {
          'app_day_income_date': {},
          'user_day_addNew_date': {},
          'user_day_active_date': {},
          'user_day_reg_date': {},
          'uset_day_pay_date': {},
          'uset_day_arpu_date': {},
          'uset_day_arppu_date': {},
          'uset_day_usertotal_date': {},
          'uset_day_userReturnBuy_date': {},
        }
      }
    },
    methods: {
      tabClick(tab) {
        // app 收入
        if (tab.name === 'app_total_income') {
          this.getDayAppIncome();
        }
        // 用户新增
        if (tab.name === 'user_new_add') {
          this.getDayUserNewAddNum();
        }
        // 每日活跃
        if (tab.name === 'user_day_active') {
          this.getDayUserActiveNum();
        }
        // 新注册用户转化
        if (tab.name === 'user_day_regPay') {
        	this.getDayUserRegPay();
        }
        // 日付费率
        if (tab.name === 'user_day_pay') {
        	this.getDayUserPay();
        }
        // 日argu
        if (tab.name === 'user_day_arpu') {
        	this.getDayUserArpu();
        }
        // 日arppu
        if (tab.name === 'user_day_arppu') {
        	this.getDayUserArppu();
        }
        //买地数量排行
        if (tab.name === 'user_BuyOrderBy_change') {
        	this.userByOrderBy();
        }
        // 付费金额排行
        if (tab.name === 'user_PayOrderBy_change') {
        	this.userPayOrderBy();
        }
      },
      // 选择app每日收入日期
      chose_appIncome_date() {
        if (!this.choseDate.app_day_income[0] || !this.choseDate.app_day_income[1]) {
          return;
        }
        this.duringTime.app_day_income_date = this.chose_date(this.choseDate.app_day_income);
        this.getDayAppIncome();
      },
      // 选择app新增用户日期
      chose_userNewAdd_date() {
        if (!this.choseDate.user_day_addNew[0] || !this.choseDate.user_day_addNew[1]) {
          return;
        }
        this.duringTime.user_day_addNew_date = this.chose_date(this.choseDate.user_day_addNew);
        this.getDayUserNewAddNum();
      },
      // 选择每日活跃用户日期
      chose_userDayActive_date() {
        if (!this.choseDate.user_day_active[0] || !this.choseDate.user_day_active[1]) {
          return;
        }
        this.duringTime.user_day_active_date = this.chose_date(this.choseDate.user_day_active);
        this.getDayUserActiveNum();
      },
      // 获取app注册并消费的日期
      chose_userDayReg_pay() {
        if (!this.choseDate.user_day_reg[0] || !this.choseDate.user_day_reg[1]) {
          return;
        }
        this.duringTime.user_day_reg_date = this.chose_date(this.choseDate.user_day_reg);
        this.getDayUserRegPay();
      },
      // 获取app消费日期
      chose_userDay_pay() {
        if (!this.choseDate.user_day_pay[0] || !this.choseDate.user_day_pay[1]) {
          return;
        }
        this.duringTime.uset_day_pay_date = this.chose_date(this.choseDate.user_day_pay);
        this.getDayUserPay();
      },
      // 获取日arpu日期
      chose_userDay_arpu() {
      	if (!this.choseDate.user_day_arpu[0] || !this.choseDate.user_day_arpu[1]) {
          return;
        }
        this.duringTime.uset_day_arpu_date = this.chose_date(this.choseDate.user_day_arpu);
        this.getDayUserArpu();
      },
      // 获取日arppu日期
      chose_userDay_arppu() {
      	if (!this.choseDate.user_day_arppu[0] || !this.choseDate.user_day_arppu[1]) {
          return;
        }
        this.duringTime.uset_day_arppu_date = this.chose_date(this.choseDate.user_day_arppu);
        this.getDayUserArppu();
      },
      chose_date(_choseDate) {
        let _duringTime = {
          'startTime': Math.ceil(new Date(_choseDate[0]).getTime() / 1000),
          'endTime': Math.ceil(new Date(_choseDate[1]).getTime() / 1000)
        }
        return _duringTime;
      },
      // 获取总付费转化
      chose_userTotal_change() {
      	if (!this.choseDate.user_total_change[0] || !this.choseDate.user_total_change[1]) {
          return;
        }
        this.duringTime.uset_day_usertotal_date = this.chose_date(this.choseDate.user_total_change);
        this.userTotalChange();
      },
      // 获取复购率日期
       chose_returnBuy_change() {
      	if (!this.choseDate.user_return_buy[0] || !this.choseDate.user_return_buy[1]) {
          return;
        }
        this.duringTime.uset_day_userReturnBuy_date = this.chose_date(this.choseDate.user_return_buy);
        this.userReturnBuy();
      },   
      // 付费金额排名前50
      userPayOrderBy() {
      	apiTree('chart/echarts', 'chart/userPayOrder').then((res) => {
          if (res.s === 1) {
						this.getFiveMoneys = res.d.data;
            for (let i in res.d.data) {
              this.getFiveMoneys[i].num = (parseInt(res.d.data[i].num/100));
            }
          }
        })
      },
      // 购买次数排行前50名 
      userByOrderBy() {
      	apiTree('chart/echarts', 'chart/userBuyOrder').then((res) => {
          if (res.s === 1) {
          	this.getFiveFields = res.d.data;
          } 
        })
      },  
      // 日arppu
      getDayUserArppu() {
      	let para = {};
      	if (!util.isEmptyObject(this.duringTime.uset_day_arppu_date)) {
      		para = this.duringTime.uset_day_arppu_date;
      	}
      	apiTree('chart/echarts','chart/getDayArppu',para).then((res) => {
          if (res.s === 1) {
            this.appDayArppuOptions.xAxis.data = [];
            this.appDayArppuOptions.series.data = [];
            for (let i in res.d.data) {
              this.appDayArppuOptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.appDayArppuOptions.series.data.push(parseInt(res.d.data[i].per));
            }
            this.userDayArppuChart.setOption(this.appDayArppuOptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },
      // 日ARPU
      getDayUserArpu() {
      	let para = {};
      	if (!util.isEmptyObject(this.duringTime.uset_day_arpu_date)) {
      		para = this.duringTime.uset_day_arpu_date;
      	}
      	apiTree('chart/echarts','chart/getDayArpu',para).then((res) => {
          if (res.s === 1) {
          	console.log(res);
            this.appDayArpuOptions.xAxis.data = [];
            this.appDayArpuOptions.series.data = [];
            for (let i in res.d.data) {
              this.appDayArpuOptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.appDayArpuOptions.series.data.push(parseInt(res.d.data[i].per));
            }
            this.userDayArpuChart.setOption(this.appDayArpuOptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },   
      // 日付费率
      getDayUserPay() {
      	let para = {};
      	if (!util.isEmptyObject(this.duringTime.uset_day_pay_date)) {
      		para = this.duringTime.uset_day_pay_date;
      	}
      	apiTree('chart/echarts','chart/getDayPay',para).then((res) => {
          if (res.s === 1) {
            this.appDayPayOptions.xAxis.data = [];
            this.appDayPayOptions.series.data = [];
            for (let i in res.d.data) {
              this.appDayPayOptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.appDayPayOptions.series.data.push(parseInt(res.d.data[i].per));
            }
            this.userDayPayChart.setOption(this.appDayPayOptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },      
      //新注册付费转化率
      getDayUserRegPay() {
      	let para = {};
      	if (!util.isEmptyObject(this.duringTime.user_day_reg_date)) {
      		para = this.duringTime.user_day_reg_date;
      	}
      	apiTree('chart/echarts','chart/getRegPay',para).then((res) => {
          if (res.s === 1) {
            this.appRegPayOptions.xAxis.data = [];
            this.appRegPayOptions.series.data = [];
            for (let i in res.d.data) {
              this.appRegPayOptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.appRegPayOptions.series.data.push(parseInt(res.d.data[i].per));
            }
            this.userDayRegPayChart.setOption(this.appRegPayOptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },
      // 获得App总收入
      getDayAppIncome() {
        let para = {};
        if (!util.isEmptyObject(this.duringTime.app_day_income_date)) {
          para = this.duringTime.app_day_income_date;
        }
        apiTree('chart/echarts','chart/getAppIncome',para).then((res) => {
          if (res.s === 1) {
            this.appIncome0ptions.xAxis.data = [];
            this.appIncome0ptions.series.data = [];
            this.appTotalIncome = parseInt(res.d.app_total_income);
            this.userRegTotalNum = parseInt(res.d.app_user_reg_totalNum);
            this.fieldSoldTotalNum = parseInt(res.d.field_sold_totalNum);
            this.fieldInventTotalNum = parseInt(res.d.field_invent_totalNum);
            this.app_user_change = parseInt(res.d.app_user_change);
            this.app_reBuy = parseInt(res.d.app_reBuy);
            this.app_reCount = res.d.app_reCount.toFixed(2);
            this.app_total_reCount = res.d.app_total_reCount;
            this.app_reBuyNumber = parseInt(res.d.app_reBuyNumber);
            this.app_user_payTotal = parseInt(res.d.app_user_payTotal);
            for (let i in res.d.data) {
              this.appIncome0ptions.xAxis.data.push(res.d.data[i].t_date.substring(5))
              this.appIncome0ptions.series.data.push(Math.floor(parseInt(res.d.data[i].day_total_income) / 100))
            }
            this.appIncomeChart.setOption(this.appIncome0ptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },
      // 获得每日新增用户数量
      getDayUserNewAddNum() {
        let para = {};
        if (!util.isEmptyObject(this.duringTime.user_day_addNew_date)) {
          para = this.duringTime.user_day_addNew_date;
        }
        apiTree('chart/echarts','chart/userDayNewAdd',para).then((res) => {
          if (res.s === 1) {
            this.userNewAdd0ptions.xAxis.data = [];
            this.userNewAdd0ptions.series.data = [];
            for (let i in res.d.data) {
              this.userNewAdd0ptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.userNewAdd0ptions.series.data.push(parseInt(res.d.data[i].day_newAdd_num));
            }
            this.userNewAddChart.setOption(this.userNewAdd0ptions);
          } else {
            this.$message.error('日期选择错误');
          }
        });
      },
      // 获得每日活跃用户数量
      getDayUserActiveNum() {
        let para = {};
        if (!util.isEmptyObject(this.duringTime.user_day_active_date)) {
          para = this.duringTime.user_day_active_date;
        }
         apiTree('chart/echarts','chart/userDayActive',para).then((res) => {
          if (res.s === 1) {
            this.userActiveOptions.xAxis.data = [];
            this.userActiveOptions.series.data = [];
            for (let i in res.d.data) {
              this.userActiveOptions.xAxis.data.push(res.d.data[i].t_date.substring(5));
              this.userActiveOptions.series.data.push(parseInt(res.d.data[i].day_active_num));
            }
            this.userDayActiveChart.setOption(this.userActiveOptions);
          } else {
            this.$message.error('日期选择错误');
          }
        })
      },
      drawLineChart() {
        this.appIncomeChart = echarts.init(document.getElementById('app_income_chartLine'));
        this.userNewAddChart = echarts.init(document.getElementById('user_newAdd_chartLine'));
        this.userDayActiveChart = echarts.init(document.getElementById('user_active_chartLine'));
        this.userDayRegPayChart = echarts.init(document.getElementById('user_regPay_chartLine'));
        this.userDayPayChart = echarts.init(document.getElementById('user_dayPay_chartLine'));
        this.userDayArpuChart = echarts.init(document.getElementById('user_dayarpu_chartLine'));
        this.userDayArppuChart = echarts.init(document.getElementById('user_dayarppu_chartLine'));
      },
      drawCharts() {
        this.drawLineChart()
      }
    },
    created: function () {
      this.getDayAppIncome()
    },
    mounted: function () {
      this.drawCharts()
    }
  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    float: left;
  }
  .title-tab {
    margin-top: 60px;
  }
  .topTips {
    width: 100%;
    height: 300px;
    margin-top: 30px;
    overflow: hidden;
  }
  .listTop {
    display: inline-block;
    width: 300px;
    height: 120px;
    margin-top: 10px;
    margin-right: 30px;
    background: #F78A73;
    border-radius: 5px;
  }
  .user-reg {
    background: #F4B544;
  }
  .field-sold {
    background: #3FD2BF;
  }
  .field-invent {
    background: #00AEED;
  }
  .field-rebuy {
    background: #8881cd;
  }
  p {
    color: #ffffff;
  }
  .title {
    line-height: 30px;
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid #ffffff;
  }
  .content {
    margin:auto;
    text-align: center;
    font-size: 26px;
  }
  .during {
    width: 100%;
    height: 50px;
  }
  /*.chart div {
      height: 400px;
      float: left;
  }*/
  .el-col {
    padding: 30px 20px;
  }
</style>

